<template>
	<div>
		<div class="row">
			<Banner/>
		</div>
		<div class="row">
			<div class="col-xs-2 col-xs-offset-2">
				<div class="list-group">
					<!-- 原始html中我们使用a标签实现页面的跳转 -->
					<!-- <a class="list-group-item" href="./about.html">About</a>
					<a class="list-group-item active" href="./home.html">Home</a> -->

					<!-- Vue中借助router-link标签实现路由的切换 -->
					<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
					<!-- 对象写法 -->
					<!-- <router-link class="list-group-item" active-class="active" :to="{path:'/about'}">About</router-link> -->
					<!-- 命名路由写法 -->
					<!-- <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> -->
					<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
				</div>
			</div>
			<div class="col-xs-6">
				<div class="panel">
					<div class="panel-body">
						<!-- router-view 指定组件的呈现位置 -->
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from "./components/Banner.vue";
	export default {
		name:'App',
		components:{Banner},
		mounted() {
			// console.log(this);
		},
	}
</script>

<style scoped>

</style>